<div role="card" {{{propertystr}}}>
    <div class="str-card-detail">
        {{each opt as needSlots}}
        {{if opt.name == media}}
        <slot name="media">
            {{if media}}
            <div class="card-media">
                <img src="{{media}}" alt="卡片媒体">
            </div>
            {{/if}}
        </slot>
        {{elseif opt.name == header}}
        <slot name="header">
            {{if header}}
            <div class="card-header">
                {{if thumbnail}}<img src="{{thumbnail}}" alt="卡片图标">{{/if}}
                <div class="header-container">
                    <h3>{{header}}</h3>
                    {{if subheader}}<div>{{subheader}}</div>{{/if}}
                </div>
            </div>
            {{/if}}
        </slot>
        {{elseif opt.name == support}}
        <slot name="support">
            {{if support}}<div class="support-text">{{support}}</div>{{/if}}
        </slot>
        {{/if}}
        {{/each}}
        <div class="card-foot-container">
            {{if buttons.length > 0}}
            <div class="card-btn-container">
                {{each btn as buttons}}
                <str-btn rendertype="link" id="{{btn.value}}">{{btn.content}}</str-btn>
                {{/each}}
            </div>
            {{/if}}
            {{if icons.length > 0}}
            <div class="card-icons-container">
                {{each icon as icons}}
                <str-icon class="ripple" role="icon" icon="{{icon.value}}" width="24" height="24" id="{{icon.value}}">
                </str-icon>
                {{/each}}
            </div>
            {{/if}}
        </div>

    </div>
</div>